<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" id="vp" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>成长日记</title>  
    <link href="../../../css/style.css" rel="stylesheet" type="text/css">
	<style>
		.diaryImg{
			width: 1.5rem;
			height: 1.5rem;
		}
		#diary{
			overflow: hidden;
		}
		.diaryBox{
			margin: 0 0.1rem;
			width: 1.5rem;
			position: relative;
			float: left;
		}
		.diarySmallimg{
			width: 0.75rem;
			height:0.75rem;
		}
		.diary-wrap-ul li{
			margin-bottom: 1rem;
			
		}
		.diary-wrap-ulbox{
			width: 80%;
			padding-top: 0.2rem;
		}
		.diary-wrap-ul .title{
			margin-right: 10px;
		}
		.titlea{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp:2;
			overflow: hidden;
			position: absolute;
			left: 1.6rem;
			top:0.5rem;
			width: 4rem;
		}
		.diary-top-name{
			margin-top: 0.7rem;
		}
		.today{
			font-size: 25px;
		}
		.diaryday{
			font-size: 20px;
			float: left;
		}
		.diarymonth{
			font-size: 10px;
			float: left;
			margin-top: 0.2rem;
		}
		.content{
			width: 3rem;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp:2;
			overflow: hidden;
		}
		.diarydate{
		
		}
	</style>
</head>
<script>

</script>
<body>

<div id="diary">
	<div class="diary-top posir">
		<div class="diary-top-white diary-wrap posia">
			<img :src="info.pic" class="diary-top-portrait"/>
			<div class="diary-top-name">{{info.name}}</div> 
			<div class="diary-top-list">
				<ul>
					<li class="">
						<span>
							<div class="num">{{items.artic}}</div>
						    <div class="text">文章</div>
						</span>						
					</li>
					<li class="">
						<span>
							<div class="num">{{items.moment}}</div>
						    <div class="text">瞬间</div>
						</span>						
					</li>
					<li class="">
						<span>
							<div class="num">{{items.monitor}}</div>
						    <div class="text">视频</div>
						</span>						
					</li>
				</ul>
			</div>
		</div>
	</div>
	
	<div class="diary-nav diary-wrap">
		
		<ul>
			<li class="current diary-li1">
				<a href="javascript:;">
					<img src="../../../images/diary-add1.png" class="diary-nav-pic diary-img1"/>
				    <span>全部</span>
				</a>				
			</li>
			<li class="diary-li2">
				<a href="javascript:;">
					<img src="../../../images/wenzhang2.png" class="diary-nav-pic diary-img2"/>
				    <span>文章</span>
				</a>				
			</li>
			<li class="diary-li3">
				<a href="javascript:;">
					<img src="../../../images/shuanjian2.png" class="diary-nav-pic diary-img3"/>
				    <span>瞬间</span>
				</a>				
			</li>
			<li class="diary-li4">
				<a href="javascript:;">
					<img src="../../../images/video2.png" class="diary-nav-pic diary-img4"/>
				    <span>视频</span>
				</a>				
			</li>
		</ul>
	</div>
	
	<div class="diary-info-list">
		<div class="diary-wrap">
			<ul class="diary-wrap-ul">
				<li v-for="(item,index) in items" v-if='index<items.number-4'>
					<div class="title fl">
						<span class="today">{{items.ftime}}</span>
						<div class="diarydate fl">
							<span class="diaryday">{{item.ftimed}}</span>
							<span class="diarymonth">{{item.ftimem}}</span>
						</div>
					</div>
					<div class="fl diary-wrap-ulbox">
						
						<div class="diaryBox" v-if="item.message_type==1">
							<img class="diaryImg" :src="item.message_image"/>
						</div>
						<div class="diaryBox fl" v-if="item.message_type==2">
							<img style="" class="diarySmallimg fl" :src="pic" v-for="(pic,index) in item.message_image"/>
						</div>
						<div class="diaryBox" v-if="item.message_type==3">
							<div class="clearfix clearfixvideo">  
										<video :src="item.video" class="videoWidth" :poster="item.videoimg" type="video/mp4"></video>
										<div class="playbtn"><img src="../../../images/play.png" /></div>
									</div>
						</div>
						<div class="diaryBox" v-if="item.message_type==4" @tap="open_detail(item.link,item.title)">
								<img class="diaryImg fl" :src="item.pic"/> 
								<div class="titlea">{{item.title}}</div>  
						</div>
						<div class="content fl">{{item.message_content}}</div> 
					</div>
					<div class="clear"></div>
					<font class="mui-icon trash iconfont icon-trash fr" aria-hidden="true" @tap='deldiary(event,item)'></font>
				</li>
			</ul>
			<ul class="diary-wrap-ul">
				<li v-for="(item,index) in items" v-if="item.message_type==4">
					<div class="title fl">
						<span class="today">{{item.ftime}}</span>
						<div class="diarydate fl">
							<span class="diaryday">{{item.ftimed}}</span>
							<span class="diarymonth">{{item.ftimem}}</span>
						</div>
					</div>
					<div class="fl diary-wrap-ulbox">
						<div class="diaryBox " >
							<a :href="item.link">
								<img class="diaryImg" :src="item.pic"/> 
								<div class="titlea">{{item.title}}</div>
								
							</a>
						</div>
					</div>
					<div class="clear"></div>
				</li>
			</ul>
			<ul class="diary-wrap-ul">
				<li v-for="(item,index) in items" v-if="item.message_type==1">
					<div class="title fl">
						<span class="today">{{item.ftime}}</span>
						<div class="diarydate fl">
							<span class="diaryday">{{item.ftimed}}</span>
							<span class="diarymonth">{{item.ftimem}}</span>
						</div>
					</div>
					<div class="fl diary-wrap-ulbox">
						<div class="diaryBox" v-if="item.message_type==1">
							<img class="diaryImg" :src="item.message_image"/>
						</div>
						<div class="diaryBox" v-if="item.message_type==2">
							<img class="diarySmallimg fl" :src="pic" v-for="(pic,index) in item.message_image"/>
						</div>
						
						<div class="content">{{item.message_content}}</div>
					</div>
					<div class="clear"></div>
				</li>
				<li v-for="(item,index) in items" v-if="item.message_type==2">
					<div class="title fl">
						<span class="today">{{item.ftime}}</span>
						<div class="diarydate fl">
							<span class="diaryday">{{item.ftimed}}</span>
							<span class="diarymonth">{{item.ftimem}}</span>
						</div>
					</div>
					<div class="fl diary-wrap-ulbox">
						
						<div class="diaryBox" v-if="item.message_type==1">
							<img class="diaryImg" :src="item.message_image"/>
						</div>
						<div class="diaryBox" v-if="item.message_type==2">
							<img class="diarySmallimg fl" :src="pic" v-for="(pic,index) in item.message_image"/>
						</div>
						<div class="diaryBox" v-if="item.message_type==3">
							<video :src="item.video" class="videoWidth" :poster="item.videoimg" type="video/mp4"></video> 
							<div class="playbtn"><img src="../../images/play.png" /></div>
						</div>
						<div class="content" style="padding-left: 0.1rem;">{{item.message_content}}</div>
					</div>
					<div class="clear"></div>
				</li>
				<li v-for="(item,index) in items" v-if="item.message_type==5">  
					<div class="title fl">
						<span class="today">{{item.ftime}}</span>
						<div class="diarydate fl">
							<span class="diaryday">{{item.ftimed}}</span>
							<span class="diarymonth">{{item.ftimem}}</span> 
						</div>
					</div>
					<div class="fl diary-wrap-ulbox">
						
						<div class="diaryBox" v-if="item.message_type==1">
							<img class="diaryImg" :src="item.message_image"/>
						</div>
						<div class="diaryBox" v-if="item.message_type==2">
							<img class="diarySmallimg fl" :src="pic" v-for="(pic,index) in item.message_image"/>
						</div>
						
						<div class="content" style="padding-left: 0.1rem;">{{item.message_content}}</div>
					</div>
					<div class="clear"></div>
				</li>
			</ul>
			<ul class="diary-wrap-ul">
				<li v-for="(item,index) in items" v-if="item.message_type==3">
						<div class="title fl">
							<span class="today">{{item.ftime}}</span>
							<div class="diarydate fl">
								<span class="diaryday">{{item.ftimed}}</span>
								<span class="diarymonth">{{item.ftimem}}</span>
							</div>
						</div>
						<div class="fl diary-wrap-ulbox">
							<div class="diaryBox" v-if="item.message_type==3">
								<video :src="item.video" class="videoWidth" :poster="item.videoimg" type="video/mp4"></video> 
								<div class="playbtn"><img src="../../../images/play.png" /></div>
							</div>
							<div class="content">{{item.message_content}}</div>
						</div>
						<div class="clear"></div>
					</li>
			</ul>
		</div>
   </div>
</div>
 		<script src="../../../js/mui.js"></script>
		<script src="../../../js/vue.min.js"></script>
		<script src="../../../js/app.js"></script>
		<script src="../../../js/iconfont.js"></script>
		<script src="../../../js/jquery-1.8.3.min.js"></script>
		<script>
			$(function(){
	$(".diary-nav ul li").click(function(){		
		var i=$(".diary-nav ul li").index(this);
		$(this).addClass("current").siblings().removeClass("current");
		$(".diary-info-list ul.diary-wrap-ul").eq(i).show().siblings().hide();	
	});
	
	var img1="../../../images/diary-add1.png";
	var img2="../../../images/diary-add2.png";
	var img3="../../../images/wenzhang1.png";
	var img4="../../../images/wenzhang2.png"; 
	var img5="../../../images/shuanjian1.png";
	var img6="../../../images/shuanjian2.png";
	var img7="../../../images/video1.png";
	var img8="../../../images/video2.png";
	
	$(".diary-nav ul li.diary-li1").click(function(){	
		$(this).find("img.diary-img1").attr("src",img1);		
		$(".diary-nav ul li.diary-li2").find("img.diary-img2").attr("src",img4);
		$(".diary-nav ul li.diary-li3").find("img.diary-img3").attr("src",img6);		
		$(".diary-nav ul li.diary-li4").find("img.diary-img4").attr("src",img8);
    });
    $(".diary-nav ul li.diary-li2").click(function(){	
		$(".diary-nav ul li.diary-li1").find("img.diary-img1").attr("src",img2);		
		$(this).find("img.diary-img2").attr("src",img3);
		$(".diary-nav ul li.diary-li3").find("img.diary-img3").attr("src",img6);		
		$(".diary-nav ul li.diary-li4").find("img.diary-img4").attr("src",img8);
    });
    $(".diary-nav ul li.diary-li3").click(function(){	
		$(".diary-nav ul li.diary-li1").find("img.diary-img1").attr("src",img2);		
		$(".diary-nav ul li.diary-li2").find("img.diary-img2").attr("src",img4);
		$(this).find("img.diary-img3").attr("src",img5);		
		$(".diary-nav ul li.diary-li4").find("img.diary-img4").attr("src",img8);
    });
    $(".diary-nav ul li.diary-li4").click(function(){	
		$(".diary-nav ul li.diary-li1").find("img.diary-img1").attr("src",img2);		
		$(".diary-nav ul li.diary-li2").find("img.diary-img2").attr("src",img4);
		$(".diary-nav ul li.diary-li3").find("img.diary-img3").attr("src",img6);		
		$(this).find("img.diary-img4").attr("src",img7);
    });
    
//  var diary_article_img=document.querySelectorAll(".diary-article-img");
//      abc=diary_article_img.style.display;
//  if (abc=='block') {
//  	$(".diary-article .diary-text").style.width="75%";
//  } else{
//  	$(".diary-article .diary-text").style.width="100%";
//  }
});
				//停止播放
				function pause(){
					for(var i=0;i<$('.videoWidth').length;i++){
							$('.videoWidth')[i].pause();
							$('.playbtn')[i].style.display='block';
						}
				}
			mui.init()
			var state
			mui.plusReady(function() {
				 state= app.getState(); 
				 uid = state.userid;
				mui.post(Apiurl+'index/diary', { 
					uid: uid
				}, function(data) {
					//console.log(JSON.stringify(data)); 
					diary.items = data
					
				}, 'json');
				mui.post(Apiurl+'index/member_info', {
					uid: uid
				}, function(data) {
					//console.log(JSON.stringify(data)); 
					diary.info = data
					
				}, 'json');
				mui('#diary').on('tap', '.playbtn', function() {
						pause();
						this.previousElementSibling.play();
						this.previousElementSibling.webkitRequestFullScreen()
						this.style.display = 'none';
						this.previousElementSibling.addEventListener('ended',function(){
							this.nextElementSibling.style.display='block';
						})
					})
					mui('#diary').on('tap', '.videoWidth', function() {
						this.pause();
						this.nextElementSibling.style.display = 'block';
					})
			});
			var diary = new Vue({
				el: '#diary', 
				data: {
					items: [],
					info:[]
				},
				methods: {
					deldiary: function(event,item){ 
						
						var btnArray = ['否', '是'];
						mui.confirm('您是否要删除该条信息？', '删除确认', btnArray, function(e) {
							if(e.index == 1) {
								mui.post(Apiurl+'index/diarydel',{
									uid:uid,
									id:item.message_id
								},function(data){ 
									if(data.status==200){
										event.target.parentElement.remove();
									}
								},'json')
							}
						})
						
					}
					
				}
			});
			//处理返回键
			var backButtonPress = 0;
			var old_back = mui.back;
			mui.back = function(event) {
				var adWebview = plus.webview.getWebviewById('ad_detail');
				var ws = plus.webview.currentWebview()
				if(adWebview) {
					adWebview.close();
				}else if(ws){
					ws.close();
				} else {
					backButtonPress++;
					if(backButtonPress > 1) {
						plus.runtime.quit();
					} else {
						
					}
					setTimeout(function() {
						backButtonPress = 0;
					}, 1000);
					return false;
				}
			};
		</script>
</body>
</html>
